<template>
    <a-modal :visible="isHistory" :title="title" centered width="70%" :footer="null" destroyOnClose @cancel="cloFn">
        <a-form-model :model="historyForm" layout="inline" :colon="false" style="padding:0 0 20px 0">
            <a-form-model-item label="时间段">
                <a-date-picker v-model="historyForm.beginTime" :default-value="historyForm.beginTime" :disabled-date="disabledStartDate" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" @openChange="handleStartOpenChange" />
                <span style="color:#9fb043;font-size:18px;padding:0 10px;">—</span>
                <a-date-picker v-model="historyForm.endTime" :default-value="historyForm.endTime" :disabled-date="disabledEndDate" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" :open="endOpen" @openChange="handleEndOpenChange" />
            </a-form-model-item>
            <a-form-model-item label="时间分类">
                <a-radio-group v-model="historyForm.cn">
                    <a-radio value="2011">
                        实时数据
                    </a-radio>
                    <a-radio value="2051">
                        分钟数据
                    </a-radio>
                    <a-radio value="2061">
                        小时数据
                    </a-radio>
                    <a-radio value="2031">
                        日数据
                    </a-radio>
                    <a-radio value="2031" disabled>
                        动态管控数据
                    </a-radio>
                </a-radio-group>
<!--                <a-radio-group v-model="historyForm.cn">-->
<!--                    <a-radio v-for="v in timeCheck" :value="v.cn" :key="v.id">-->
<!--                        {{v.name}}-->
<!--                    </a-radio>-->
<!--                </a-radio-group>-->
            </a-form-model-item>
            <a-form-model-item style="float: right">
                <a-button type="primary" @click="searchFn">搜索</a-button>
            </a-form-model-item>
        </a-form-model>
        <div class="htable-box">
            <a-table style="height:98%" :columns="columns" :rowKey="record=> record.id" :data-source="TableData" :pagination="false" size="middle">
                <template slot="sampleValue" slot-scope="text, record">
                    <div style="color:red" v-if="record.isRed">{{record.sampleValue}}</div>
                    <div v-else>{{record.sampleValue}}</div>
                </template>
            </a-table>
        </div>
        <div class="content-bottom clearfix">
            <div class="page-box">
                <a-pagination :show-total="total => `共${total}条记录`" v-model="historyForm.current" :total="total" :defaultPageSize="historyForm.size" :item-render="itemRender" @change="pagechangeFn" hideOnSinglePage />
            </div>
        </div>
    </a-modal>
</template>

<script>
import moment from "moment";
export default {
    data() {
        return {
            timeCheck: [],
            isHistory: false,
            title: "",
            total: 0,
            historyForm: {
                cn: "2011",
                mn: "",
                sampleType: "",
                beginTime: moment().add(-6, "h"),
                endTime: moment(),
                size: 10,
                current: 1,
            },
            endOpen: false, // 日期组件关联弹窗
            TableData: [],
            columns: [
                {
                    title: "监测时间",
                    dataIndex: "receiveTime",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "监测类型",
                    dataIndex: "limits.waringTypeName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "监测值",
                    dataIndex: "sampleValue",
                    key: "sampleValue",
                    align: "center",
                    scopedSlots: { customRender: "sampleValue" },
                },
                {
                    title: "报警范围",
                    dataIndex: "Range",
                    align: "center",
                    ellipsis: true,
                },
            ],
        };
    },
    methods: {
        cloFn() {
            this.historyForm = {
                cn: "",
                sampleType: "",
                beginTime: moment().add(-6, "h"),
                endTime: moment(),
                size: 10,
                current: 1,
            };
            this.isHistory = false;
        },
        // 搜索按钮
        searchFn() {
            this.historyForm.current = 1;
            this.getEchartsData();
        },

        // 获取数据
        getEchartsData() {
            var timeData = JSON.parse(JSON.stringify(this.historyForm));
            // timeData.current = this.current;
            timeData.beginTime = new Date(timeData.beginTime).getTime();
            timeData.endTime = new Date(timeData.endTime).getTime();
            // timeData.mn = this.mn;
            this.$api.historyDataSelect(timeData).then((res) => {
                if (res.data.code == 0) {
                    if (res.data.data.length <= 0) {
                        this.$message.warning("暂无数据！");
                        // return;
                    }
                    console.log(res.data.data);
                    res.data.data.forEach((v) => {
                        let str1 = "";
                        switch (v.status) {
                            case "F":
                                str1 = "(停运)";
                                break;
                            case "M":
                                str1 = "(维护)";
                                break;
                            case "S":
                                str1 = "(设定值)";
                                break;
                            case "D":
                                str1 = "(故障)";
                                break;
                            case "C":
                                str1 = "(校准)";
                                break;
                            case "T":
                                str1 = "(上限)";
                                break;
                            case "B":
                                str1 = "(通讯异常)";
                                break;
                        }
                        if (v.limits) {
                            if (
                                v.sampleValue > v.limits.maxValue ||
                                v.sampleValue < v.limits.minValue
                            ) {
                                v.isRed = true;
                            } else {
                                v.isRed = false;
                            }
                            v.sampleValue =
                                v.sampleValue +
                                "(" +
                                v.limits.unit +
                                ")" +
                                str1;
                            v.Range =
                                v.limits.minValue +
                                "~" +
                                v.limits.maxValue +
                                "(" +
                                v.limits.unit +
                                ")";
                        } else {
                            v.Range = "暂无数据";
                            v.isRed = false;
                        }
                        v.receiveTime = moment(parseInt(v.receiveTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                    });
                    this.TableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
        // 日期方法
        disabledStartDate(startValue) {
            const endValue = this.historyForm.endTime;
            if (!startValue || !endValue) {
                return false;
            }
            return startValue.valueOf() > endValue.valueOf();
        },
        disabledEndDate(endValue) {
            const startValue = this.historyForm.beginTime;
            if (!endValue || !startValue) {
                return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
        },
        handleStartOpenChange(open) {
            if (!open) {
                this.endOpen = true;
            }
        },
        handleEndOpenChange(open) {
            this.endOpen = open;
        },
        // 日期方法完
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.historyForm.current = page;
            this.getEchartsData();
        },
        init(id) {
            this.getEchartsData();
            // this.$api.getEquipmentCnByEquipmentId(id).then((res) => {
            //     if (res.data.code == 0) {
            //         this.timeCheck = res.data.data;
            //         this.historyForm.cn = res.data.data[0].cn;
            //
            //     }
            // });
        },
    },
    watch: {
        "historyForm.cn": {
            deep: true,
            handler(newVal) {
                switch (newVal) {
                    case "2011":
                        this.historyForm.beginTime = moment().add(-6, "h");
                        break;
                    case "2051":
                        this.historyForm.beginTime = moment().add(-6, "h");
                        break;
                    case "2061":
                        this.historyForm.beginTime = moment().add(-15, "days");
                        break;
                    case "2031":
                        this.historyForm.beginTime = moment().add(-30, "days");
                        break;
                }
            },
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .ant-modal-body {
    padding-top: 0;
}

.htable-box {
    width: 100%;
    height: 560px;
}

.page-box {
    float: right;
}

/* 分页 */
::v-deep .ant-pagination-total-text {
    color: rgba(255, 255, 255, 0.7);
}

// 表格

::v-deep .ant-table table {
    height: auto;
    border-radius: 0;
    border-left: 1px solid #207064;
    border-right: 1px solid #207064;
}

::v-deep .ant-table-thead > tr > th {
    line-height: 22px;
    border-bottom: 0;
    border-radius: 0;
}

::v-deep .ant-table-tbody > tr > td {
    border-bottom: 1px solid #2c6a60;
}
</style>